<template>
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{ $t('common.offlineLoan') }}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="10">
                    <el-col :span="4">
                        <el-form-item prop="orderId">
                            <el-input v-model="form.orderId" :placeholder="$t('common.innerOrderId')" clearable><!--内部订单号--></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="userPhone">
                            <el-input v-model="form.userPhone" :placeholder="$t('common.mobileNumber')" clearable><!--手机号码--></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="withdrawAccount">
                            <el-input v-model="form.withdrawAccount" :placeholder="$t('common.receiptAccount')" clearable><!--收款账号--></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="userId">
                            <el-input v-model="form.userId" placeholder="UserId" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="userType" > <!--用户类型-->
                            <el-select v-model="form.userType" :clearable='true' :placeholder="$t('common.userType')" style="width: 100%">
                                <el-option key="0" :label="$t('common.newUser')" value="0"></el-option>
                                <el-option key="1" :label="$t('common.secNewUser')" value="1"></el-option>
                                <el-option key="2" :label="$t('common.oldUser')" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item prop="applyTime"><!--申请时间-->
                            <el-date-picker
                                style="width:100%"
                                v-model="form.applyTime"
                                type="datetimerange"
                                format="yyyy-MM-dd HH:mm:ss"
                                value-format="timestamp"
                                range-separator="-"
                                :default-time="['00:00:00', '23:59:59']"
                                :start-placeholder="$t('common.applyStartTime')"
                                :end-placeholder="$t('common.applyEndTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8"> <!--放款方式-->
                        <el-form-item prop="withdrawChannel" label="">
                            <el-select v-model="form.withdrawChannel" multiple clearable :placeholder="$t('common.loanType')" style="width: 100%;">
                                <el-option v-for="channel in keyMap.loanChannel" :key="channel.value" :label="channel.label" :value="channel.value" v-if="channel.active===1"></el-option>
                                <!--<el-option key="" :label="$t('common.loanType')" value=""></el-option>-->
<!--                                <el-option key="1" label="M Lhuillier" value="1"></el-option>-->
<!--                                <el-option key="3" label="Palawan Pawnshop" value="3"></el-option>-->
                                <!-- <el-option key="4" label="ECPay" value="4"></el-option> -->
<!--                                <el-option key="5" label="Bank" value="5"></el-option>-->
<!--                                <el-option key="6" label="GCash" value="6"></el-option>-->
<!--                                <el-option key="7" label="Coins" value="7"></el-option>-->
<!--                                <el-option key="9" label="RD Pawnshop" value="9"></el-option>-->
                                <!-- <el-option key="10" label="Sevven_Corporation" value="10"></el-option> -->
                                <!-- <el-option key="100" label="BALANCE" value="100"></el-option> -->
                                <!-- <el-option key="99" label="Others" value="99"></el-option> -->
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <el-button @click="search" icon="el-icon-search" type="primary">{{ $t('common.search') }}</el-button>
                            <el-button @click="exportExcel" icon="el-icon-upload2" type="primary">{{ $t('common.export') }}</el-button>
                            <el-button @click="showOfflineLoan=true" type="primary">{{ $t('common.loan') }}</el-button><!--放款-->
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form><!--el-form end-->
        </div><!--content_panel_top-->
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table ref="table" :data="tableData" style="width: 100%;" @selection-change="handleTableSelect" :max-height="tableMaxHeight" :highlight-current-row="true">
                        <el-table-column :label="$t('common.allChoose')" type="selection"></el-table-column>
                        <el-table-column label="UserId" prop="userId" min-width="120"></el-table-column>
                        <el-table-column prop="userType" :label="$t('common.userType')" width="150"><!--用户类型-->
                            <template slot-scope="scope">
                                <span>{{ scope.row.userType | switchUserType }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column :label="$t('common.name')" prop="userName" min-width="150"><!--姓名--></el-table-column>
                        <el-table-column :label="$t('common.receiptAccount')" prop="withdrawAccount" min-width="180"><!--收款账号--></el-table-column>
                        <el-table-column :label="$t('common.receiptAccountBank')" prop="withdrawAccountBank" min-width="150"></el-table-column><!--收款账号所属银行-->
                        <el-table-column :label="$t('common.mobileNumber')" prop="userPhone" min-width="150"><!--手机号码--></el-table-column>
                        <el-table-column :label="$t('common.innerOrderId')" prop="orderId" min-width="200"><!--内部订单号--></el-table-column>
                        <el-table-column align="left" :label="$t('system.appName')" prop="appName" min-width="130"></el-table-column><!--APP名称-->
                        <el-table-column :label="$t('common.contractAmount')" prop="contractAmount" min-width="120">
                            <template slot-scope="{ row }">{{ row.contractAmount | formatCurrency }}</template><!--合同金额-->
                        </el-table-column>
                        <el-table-column :label="$t('common.borrowingCycle')" prop="loanPeriod" min-width="120">
                            <template slot-scope="{ row }">{{ row.loanPeriod }}{{ $t('common.day') }}</template><!--借款周期-->
                        </el-table-column>
                        <el-table-column :label="$t('common.loanAmount')" prop="loanAmount" min-width="120">
                            <template slot-scope="{ row }">{{ row.loanAmount | formatCurrency }}</template><!--放款金额-->
                        </el-table-column>
                        <el-table-column :label="$t('common.applyDate')" prop="applyTime" min-width="180">
                            <template slot-scope="{ row }">{{ row.applyTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template><!--申请日期-->
                        </el-table-column>
                        <el-table-column :label="$t('common.operatingTime')" prop="updateTime" min-width="180">
                            <template slot-scope="{ row }">{{ row.operateTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template><!--操作时间-->
                        </el-table-column>
                        <el-table-column :label="$t('common.loanType')" prop="withdrawChannel" min-width="180"><!--放款方式-->
                            <template slot-scope="{ row }">{{ row.withdrawChannel | SwitchLoanChannel }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.notProcessTime')" prop="processingHour" min-width="120">
                            <template slot-scope="{ row }">{{ row.processingHour }}<span v-if="row.processingHour">h</span></template><!--未处理时长-->
                        </el-table-column>
                    </el-table>
                    <div v-show="tableData.length" class="table_bottom_btns">
                        <el-button @click="batchCancel" type="primary" :disabled="selectedIdList.ids.length === 0" size="small">{{ $t('common.batchCancel') }}</el-button>
                    </div>
                    <!--分页组件-->
                    <pagination @pageChange="pageChange" :page="page"></pagination>
                </div><!--module_content-->
            </div>
        </div><!--module_content-->

        <!--线下放款-->
        <upload-finance-file
            :title="$t('common.offlineLoan')"
            :visible.sync="showOfflineLoan"
            @submitUpload="submitUpload"
            :template-url="templateUrl">
        </upload-finance-file>
        <!--线下放款end-->
    </div>
</template>

<script src="./main.js"></script>
<style lang="scss" scoped>
//
</style>
